<!-- 
 * @description: 
 * @fileName: index.vue 
 * @author: 自己的名字 
 * @date: 2025-07-21 09:13:20
 * @version: V1.0.0 
!-->
<script setup lang='ts'>
import Swiper from '@/components/Swiper/index.vue'
const props = defineProps({
    mt: {
        type: Number,
        required: false,
        default: 10
    },
    height: {
        type: Number,
        required: false,
        default: 64
    },
    list: {
        type: Array,
        required: true,
        default: new Array() as any
    },
    filterList: {
        type: Array,
        required: true,
    },
    goPage: {
        type: Function,
        required: true,
        default: () => { }
    }
})
const emit = defineEmits(['change'])

console.log(props);
const previewImage = ref<any>(null);
const preview = (url: any) => {
    previewImage.value.open(url); // 传入当前选中的图片地址
};
</script>
<template>
    <view class="w-full h-full">
        <swiper :class="`w-full h-full`" :style="{ marginTop: `${props.mt}px` }" :display-multiple-items="1"
            :autoplay="false" :circular="false" :indicator-dots="true" indicator-color="#fff"
            indicator-active-color="#2196F3">
            <swiper-item v-for="(listItem, listIndex) in props.filterList" :key="listIndex" class="w-full h-3/4">
                <view class="grid grid-cols-3 gap-4 p-4">
                    <template v-for="(item, index) in listItem" :key="index">
                        <view class="w-full bg-white rounded-md" :style="{ height: `${props.height}vh` }"
                            style="background: rgba(255, 255, 255, 0.6);">
                            <image :src="item.image" mode="aspectFit" class="w-full "
                                :style="{ height: `${props.height}vh` }" @click=" preview(item.image)" />
                        </view>
                    </template>
                </view>
            </swiper-item>
        </swiper>
    </view>

    <q-previewImage ref="previewImage" :urls="props.list" ></q-previewImage>
</template>


<style scoped lang='scss'>
:deep(.uni-swiper-dot) {
    width: 24px;
    height: 8px;
    border-radius: 0
}
</style>